<template>
    <view class="index">
        <!-- #ifdef H5 -->
        <download-nav v-if="isShowDownload"></download-nav>
        <!-- #endif -->
        <u-sticky offset-top="0" h5-nav-height="0" bg-color="transparent" :enable="enable">
            <u-navbar
				:title="navbarTitle"
				titleColor="#FFF"
                :border-bottom="false"
                :is-fixed="false"
                custom-class="nav-bg"
				:background="{backgroundImage: 'linear-gradient(90deg, #366667 0%, #569496 100%)'}"
				back-icon-color="#FFF"
            > 
            </u-navbar>
        </u-sticky>
		
		<tabs  :config="tabsConfig"  :active="tabActive" @change="onTabChange">
			<tab v-for="(item, index) in tabList" :key="item.type" :title="item.name">
				<!-- 补贴时显示 -->
				<view class="economize-money-box" v-if="tabActive == 2">
					共为你节省（元）
					<view class="money">{{economize_money}}</view>
				</view>
				<view class="record-list">
					<view class="record-item" v-for="(value, key) in detailsList" :key="key">
						<view class="year">
							<text>{{key.split('-')[1]}}</text>年
						</view>
						<view class="month-box" v-for="(childrenValue, childrenKey) in value" :key="childrenKey">
							<view class="month">
								<text>{{childrenKey.split('-')[1]}}</text>月
							</view>
							<view class="record-child" v-for="(child, childIndex) in childrenValue" :key="childIndex">
								<view class="record-child-item row-between">
									<view class="intro-box row">
										<text class="name">{{child.type_name}}</text>
										<text class="desc">{{child.order_goods}}</text>
									</view>
									<view class="num-box" :class="child.num.includes('+') ? 'add' : ''">
										{{child.num}}
									</view>
								</view>
								<view class="record-child-item row-between">
									<view class="date-box">
										{{child.buy_time}}
									</view>
									<!-- 补贴时不显示 -->
									<view class="num-box" v-if="tabActive != 2">
										{{child.residue_num}}根
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<loading-footer :status="status" slotEmpty>
						<u-empty text="暂无明细~" margin-top="100" slot="empty"></u-empty>
				</loading-footer>
			</tab>
		</tabs>
		
        <!-- 无网络提示 -->
        <u-no-network z-index="1200" @retry="handleRetry"></u-no-network>
    </view>
</template>

<script>
import { mapMutations, mapGetters, mapActions } from 'vuex'
import { getHome, getMenu, getBestList, getBambooRank, getSeckillTime, getSeckillGoods, getGoodsList, vaultDetail } from '@/api/store'
import { loadingType } from '@/utils/type'
import { loadingVaultDetailFun, menuJump, arraySlice, setTabbar, getRect, trottle } from '@/utils/tools'
import { toLogin } from '@/utils/login'
import Cache from '@/utils/cache'
import { getConfig, userShare, getRegisterCoupon } from '@/api/app'
	import {
		applyWithdraw,
		getWithdrawConfig
	} from "@/api/user";


const app = getApp()
export default {
    data() {
        return {
			navbarTitle: '明细',
			tabActive: 0,
			tabList: [
				{
					name: '金竹子',
					type: 1,
				},
				{
					name: '玉竹子',
					type: 2,
				},
				{
					name: '补贴明细',
					type: 3,
				}
			],
			tabsConfig: {
				// 字体大小 rpx
				fontSize: 32,
				// 字体颜色
				color: '#3D3D3D',
				// 激活字体颜色
				activeColor: '#3E7273',
				// 下划线左右边距，文字宽度加边距 rpx
				underLinePadding: 0,
				// 下划线高度 rpx
				underLineHeight: 4,
				// 下划线颜色
				underLineColor: '#3E7273'
			},
			bambooNum: '',
			widthDrawConfig: {},
			
            scrollTop: 0,
            navSwiperH: 374,
            logo: '',
            navHeight: 0,
            currentSwiper: 0,
            page: 1,
            status: loadingType.LOADING,
			detailsList: {},
            navBg: 0,
            navList: [],
            news: [],
            seckill: {},
            seckillGoods: [],
            hotGoods: [],
            newGoods: [],
            activityArea: [],
            showCoupop: false,
            couponPopList: [],
            coupon: [],
            isDischarge: true,
            enable: true,
            isShowDownload: false,
			economize_money: 0,
        }
    },
    async onLoad(options) {
		console.log('options---', options)
		
		this.getVaultDetail()
		

        this.headerAction = wx.createAnimation({
            delay: 0,
            duration: 100,
            timingFunction: 'ease-in-out'
        })
        this.onPageScroll = trottle(this.onPageScroll, 500, this)
        setTabbar()
        this.navHeight = app.globalData.navHeight
        this.isDischarge = false
        console.log(this.appConfig)
        // #ifdef H5
        if (options && options.isapp == 1) {
            this.isShowDownload = true
        }
        // #endif
    },
    async onShow() {
        this.$nextTick(function () {
            getRect('.index').then((res) => {
                if (res.top == 0) {
                    this.navBg = 0
                }
            })
        })

        // #ifdef H5
        this.enable = true
        // #endif
    },
    onHide() {
        // #ifdef H5
        this.enable = false
        // #endif
    },
    onReachBottom() {
        this.getVaultDetail()
    },
    onPullDownRefresh() {
		this.initData()
    },
    onShareAppMessage() {
        console.log(this.inviteCode)
        const shareInfo = Cache.get('shareInfo')
        return {
            title: shareInfo.mnp_share_title,
            path: 'pages/index/index?invite_code=' + this.inviteCode,
            imageUrl: shareInfo.mnp_share_image
        }
    },
    onPageScroll(e) {
        const top = uni.upx2px(100)
        const { scrollTop } = e
        if (!this.enable) return
        let percent = scrollTop / top
        this.navBg = percent > 1 ? 1 : percent
        this.scrollTop = scrollTop
    },
    destroyed() {
        this.isDischarge = true
    },
    methods: {
        ...mapMutations(['SETCONFIG']),
        ...mapActions(['getUser']),
        // 网络重试刷新网络请求（解决在ios中首次进入时需要授权蜂窝加载空白页面问题
        async handleRetry() {
            console.log('网络重试刷')
            try {
                const { code, data } = await getConfig()
                if (code == 1) {
                    this.SETCONFIG(data)
                    setTabbar()
                }
            } catch (e) {
                uni.showTabBar()
            }
            this.getShareInfo()
            this.getUser()
        },
		initData(){
			this.page = 1;
			this.detailsList = {};
			this.status = loadingType.LOADING;
			this.getVaultDetail()
		},
		async getVaultDetail() {
			let params = {
				source: this.source
			}
			let { page, detailsList, status } = this
			const data = await loadingVaultDetailFun(vaultDetail, page, detailsList, status, params)
			console.log('data---', data)
			if (!data) return
			this.page = data.page
			this.detailsList = data.dataList
			console.log('this.detailsList', this.detailsList)
			this.economize_money = data.economize_money;
			this.status = data.status
		},
		handleWithdraw(){
			if(this.bambooNum*1 <= 0){
				 this.$toast({ title: "请输入兑换根数" });
				 return;
			}
			
			let params = {
				type: 2,
			    num: this.bambooNum, // 提现使用金竹数量
				remark: ''
			}
			console.log('params--', params)
			applyWithdraw(params).then(res => {
				if (res.code == 1) {
					 this.$toast({ title: "提现成功" });
				}
			});
		},
		onTabChange(active){
			console.log('active', active)
			this.tabActive = active;
			this.initData()
		},
        async getShareInfo() {
            const { code, data } = await userShare()
            if (code == 1) {
                Cache.set('shareInfo', data)
            }
        },

        async tapMenu(item) {
            if (!this.isLogin) return toLogin()
            menuJump(item)
        },
    },
    computed: {
        ...mapGetters(['cartNum', 'inviteCode', 'appConfig']),
        navBackground() {
            return this.seting.top_bg_image
                ? {
                      'background-image': `url(${this.seting.top_bg_image})`
                  }
                : {}
        },
        showLogo() {
            return this.seting.logo
        },
        navSearch() {
            if (this.showLogo === 0) return true

            return this.navBg < 1 ? false : true
        },
        seting() {
            const { index_setting } = this.appConfig
            return index_setting
        },
		source() {
			return this.tabList[this.tabActive].type
		}
    }
}
</script>

<style lang="scss" scoped>
page{
	min-height: 100vh;
	background: #F5F5F5;
}
.nav-bg{
	
}

.index {

    .header {
        .navigation-bar {
            padding-top: var(--status-bar-height);
            box-sizing: border-box;
        }
    }
	
	.economize-money-box{
		padding: 18rpx 32rpx;
		background: #FFFFFF;
		font-size: 28rpx;
		color: #666666;
		line-height: 40rpx;
		margin-top: 20rpx;
		.money{
			margin-top: 10rpx;
			font-weight: 700;
			font-size: 62rpx;
			color: #333333;
			line-height: 72rpx;
		}
	}
	
	.record-list{
		.record-item{
			.year{
				margin-top: 20rpx;
				padding-left: 20rpx;
				font-weight: 500;
				font-size: 64rpx;
				color: #333333;
				line-height: 90rpx;
			}
			.month-box{
			    margin-top: 20rpx;
				padding: 30rpx;
				background: #FFF;
			}
			.month{
				margin-bottom: 28rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
				line-height: 40rpx;
				text{
					font-weight: 500;
					font-size: 64rpx;
					color: #333333;
					line-height: 90rpx;
				}
			}
			.record-child{
				margin-bottom: 32rpx;
				&:last-child{
					margin-bottom: 0;
				}
			}
			.record-child-item{
				margin-bottom: 10rpx;
				.intro-box{
					.name{
						font-weight: 500;
						font-size: 28rpx;
						color: #333333;
						line-height: 40rpx;
						margin-right: 20rpx;
					}
					.desc{
						font-size: 28rpx;
						color: #326465;
						line-height: 40rpx;
						max-width: 400rpx;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
				}
				.num-box{
					font-size: 28rpx;
					color: #333333;
					line-height: 40rpx;
					&.add{
						color: #EC6958;
					}
				}
				.date-box{
					font-size: 24rpx;
					color: #666666;
					line-height: 34rpx;
				}
			}
		}
	}

    .contain {
        .main {
            position: relative;
            z-index: 9;
            padding: 0 20rpx;

            .nav {
                position: relative;
                border-radius: 14rpx;

                .nav-item {
                    width: 20%;
                    margin-top: 30rpx;

                    .nav-icon {
                        width: 82rpx;
                        height: 82rpx;
                        margin-bottom: 15rpx;
                    }
                }

                .dots {
                    position: absolute;
                    left: 50%;
                    transform: translateX(-50%);
                    bottom: 20rpx;
                    display: flex;

                    .dot {
                        width: 10rpx;
                        height: 6rpx;
                        border-radius: 6rpx;
                        margin-right: 10rpx;
                        background-color: rgba(255, 44, 60, 0.4);

                        &.active {
                            width: 20rpx;
                            background-color: $-color-primary;
                        }
                    }
                }
            }
			
			
			.invite-box{
				margin: 14rpx auto 50rpx;
				image{
					width: 710rpx;
					height: 208rpx;
				}
			}


			
			.show-goods-box{
				.show-goods-list{
					.show-goods-item{
						.imgs-box{
							position: relative;
							width: 710rpx;
							height: 296rpx;
							border-radius: 12rpx;
							image{
								width: 100%;
								height: 100%;
								border-radius: 12rpx;
							}
							.distance-box{
								position: absolute;
								left: 12rpx;
								bottom: 10rpx;
								padding: 12rpx 16rpx;
								background: rgba(0,0,0,0.58);
								border-radius: 8rpx 8rpx 8rpx 8rpx;
								font-size: 24rpx;
								color: #FFFFFF;
							}
						}
						.content-box{
							position: relative;
							padding: 16rpx 20rpx;
							background: #FFF;
							.title{
								margin: 16rpx 0 8rpx;
								font-weight: 500;
								font-size: 30rpx;
								color: #333333;
								line-height: 40rpx;
							}
							.intro{
								font-size: 24rpx;
								color: #999999;
								line-height: 36rpx;
							}
							.num-box{
								margin-top: 10rpx;
								font-size: 20rpx;
								color: #999999;
								line-height: 28rpx;
								.price-box{
									font-weight: 700;
									font-size: 48rpx;
									color: #FF7125;
									line-height: 32rpx;
									.unit{
										margin-left: 8rpx;
										font-size: 28rpx;
									}
								}
								.subsidy-box{
									margin-left: 24rpx;
									padding: 8rpx 16rpx;
									font-size: 20rpx;
									color: #CC760C;
									line-height: 28rpx;
									background: rgba(255,197,82,0.3);
									border-radius: 8rpx 8rpx 8rpx 8rpx;
								}
							}
							.exchange-box{
								position: absolute;
								right: 20rpx;
								bottom: 12rpx;
								width: 114rpx;
								height: 92rpx;
								text-align: center;
								background-size: 100% 100%;
								color: #FFF;
								font-size: 24rpx;
								padding: 18rpx 0 0 0;
								line-height: 30rpx;
							}
							.gain-box{
								position: absolute;
								right: 20rpx;
								bottom: 12rpx;
								width: 136rpx;
								height: 54rpx;
								text-align: center;
								background-size: 100% 100%;
								color: #FFF;
								font-size: 24rpx;
								padding: 22rpx 0 0 16rpx;
								line-height: 28rpx;
							}
						}
					}
				}
			}
			
            .information {
                height: 76rpx;
                box-shadow: 0px 0px 14px rgba(0, 0, 0, 0.06);
                padding: 0 20rpx;
                box-sizing: border-box;
                border-radius: 14rpx;

                .news {
                    position: relative;

                    .shade {
                        position: absolute;
                        width: 100%;
                        height: 100%;
                        z-index: 100;
                    }
                }

                .icon-toutiao {
                    width: 114rpx;
                    height: 34rpx;
                }

                .gap-line {
                    height: 28rpx;
                    width: 1px;
                    background-color: #dcdddc;
                    margin: 0 30rpx;
                }
            }

        }
    }
}
</style>
